const gulp = require('gulp');
const replace = require('gulp-replace');
const rev = require('gulp-rev');
const revCollector = require('gulp-rev-collector');
const del = require('del');
const minifyHtml = require('gulp-minify-html')
// 0-2.导入gulp-cssmin
const cssmin = require('gulp-cssmin')
// 0-3.导入gulp-autoprefixer
const autoPrefixer = require('gulp-autoprefixer');
const uglify = require('gulp-uglify');
const commonPath = './src'
const targetPath = './dist'


var srcs = {
    'html': [`${commonPath}/index.html`, `${targetPath}/`],
    'css': [`${commonPath}/assets/css/*.css`, `${targetPath}/assets/css`],
    'js': [`${commonPath}/assets/js/*.js`, `${targetPath}/assets/js/`],
    'json': [`${commonPath}/assets/js/*.json`, `${targetPath}/assets/js/`],
    'image': [`${commonPath}/assets/image/*.*`, `${targetPath}/assets/image/`],
    'modules': [`${commonPath}/assets/js/modules/*.js`, `${targetPath}/assets/js/modules/`],
    "revCss": `${targetPath}/assets/rev/css/`,
    "revJs": `${targetPath}/assets/rev/js/`,
    "revRootPath": `${targetPath}/assets/rev/**/*.json`,

}
gulp.task('revCss', function () {
    // 1. 找到文件
    return gulp.src(srcs.css[0])
        .pipe(autoPrefixer({
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ],
            grid: true
        }))
        // 把css中的px转换成rem
        .pipe(
            replace(/(\d+)px/g, function (match, p1) {
                return Number(p1) / 10 + "rem";
            })
        )
        // 2. 压缩文件
        .pipe(cssmin())
        .pipe(rev())
        // 3. 另存压缩后的文件
        .pipe(gulp.dest(srcs.css[1]))
        .pipe(rev.manifest())
        .pipe(gulp.dest(srcs.revCss))
});
gulp.task('revJs', function () {
    // 1. 找到文件
    return gulp.src(srcs.js[0])
        .pipe(uglify())
        .pipe(rev()) //给文件添加hash编码
        .pipe(gulp.dest(srcs.js[1]))
        .pipe(rev.manifest()) //生成rev-mainfest.json文件作为记录
        .pipe(gulp.dest(srcs.revJs))
});

gulp.task('moveHtml', function () {
    return gulp.src(srcs.html[0])
        .pipe(gulp.dest(srcs.html[1]))
});
gulp.task('moveJson', function () {
    return gulp.src(srcs.json[0])
        .pipe(gulp.dest(srcs.json[1]))
});
gulp.task('moveModules', function () {
    return gulp.src(srcs.modules[0])
        .pipe(gulp.dest(srcs.modules[1]))
});
gulp.task('moveImage', function () {
    return gulp.src(srcs.image[0])
        .pipe(gulp.dest(srcs.image[1]))
});


// 替换html中的js版本号
gulp.task('revHtml', function () {
    return gulp.src([srcs.revRootPath, `${srcs.html[1]}index.html`])
        .pipe(revCollector())
        .pipe(minifyHtml())
        .pipe(gulp.dest(`${targetPath}/`))
});

gulp.task('move', gulp.series('moveHtml', 'moveJson', 'moveModules', 'moveImage'))

// 异步清楚dist 以外的文件
gulp.task('clean:dist', function () {
    return del([`${targetPath}/**`])
});
gulp.task('clean:rev', function () {
    return del([`${targetPath}/assets/rev`])
});

gulp.task('default', gulp.series('clean:dist', 'revCss', 'revJs', 'move', 'revHtml', 'clean:rev'))